<template>
  <div class="add-problem-shipment-page">
    <a-spin :spinning="loading">
      <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }">
        <div class="base-info">
          <div class="title">运单信息:</div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
              <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                <template v-if="item.name === 'waybillNum'">
                  {{ passData[item.name] }}
                </template>
                <template v-else-if="item.name === 'createTime'">
                  {{ dayjs(+passData[item.name]).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
                <template v-else-if="item.name === 'depositTime'">
                  {{ dayjs(+passData[item.name]).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
                <template v-else>{{ passData[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>

      <div class="question-info">
        <div class="title">审批进度</div>
        <a-timeline style="padding: 10px">
          <template v-for="item in formState.approvalList" :key="item.id">
            <a-timeline-item :color="getColor(item.state)">
              <div>
                <!-- 第一层 -->
                <div class="list-margin-bottom firstTitle">
                  <span class="list-margin">{{ item.deptName }}</span>
                  <span>{{ getState.get(item.state) }}</span>
                </div>

                <!-- 第二层 -->
                <div class="list-margin-bottom">
                  <span class="list-margin" v-if="item.approvalUserName">{{ item.approvalUserName }}</span>
                  <span class="list-margin">{{ getState.get(item.state) }}</span>
                  <span class="list-margin" v-if="item.deptName === '财务部'">{{ item.approvalStorageDto?.isCloseCase === 1 ? "已结案" : "未结案" }}</span>
                  <span class="list-margin">{{ item.approvalTime && dayjs(+item.approvalTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
                  <span>问题描述:{{ item.remark }}</span>
                </div>

                <!-- 第三层 -->
                <div v-if="item.approvalStorageDto">
                  <span class="list-margin">分摊比例调整为:</span>
                  <span class="list-margin">业务:{{ item.approvalStorageDto.bizProportion }}</span>
                  <span class="list-margin">公司:{{ item.approvalStorageDto.companyProportion }}</span>

                  <span class="list-margin">总金额：{{ item.approvalStorageDto.totalPrice }} </span>
                  <span class="list-margin">个人:{{ item.approvalStorageDto.bizProportionPrice }}</span>
                  <span class="list-margin">公司:{{ item.approvalStorageDto.companyProportionPrice }}</span>
                </div>

                <div v-if="item.file">
                  <a-row>
                    <template v-for="(e, index) in item.file.split(',')" :key="index">
                      <a-col :span="4">
                        <a-image :src="e" :width="150" style="margin-right: 10px" />
                      </a-col>
                    </template>
                  </a-row>
                </div>
              </div>
            </a-timeline-item>
          </template>
        </a-timeline>
      </div>
    </a-spin>
    <div class="operation-wrapper">
      <a-button @click="resetForm">关 闭</a-button>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "ProblemShipment"
};
</script>
<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { formItemColumn } from "./data";
import { getProblemPieceInfoApi } from "@/api/approval/myApproval";
import dayjs from "dayjs";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: FinanceClosing.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();
const { visible, passData } = toRefs(props);
const { formState, loading, formRef, getColor, isConfirmationHandle, getState } = InitHook();
const { resetForm } = OperationHook({ formRef, emit });

const init = () => {
  loading.value = true;
  getProblemPieceInfoApi({ id: passData.value.id })
    .then(({ data }: { data: { approvalList: FinanceClosing.getProblemPieceInfoList[] } }) => {
      formState.approvalList = data.approvalList;
      if (passData.value.bizConfirmation === 1) {
        formState.approvalList?.push({
          deptName: "业务员",
          state: isConfirmationHandle(passData.value.isConfirmation),
          approvalTime: passData.value.confirmationTime
        });
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
watch(
  () => visible.value,
  v => {
    if (!v) {
      resetForm();
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.add-problem-shipment-page {
    padding-bottom: 50px;
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
    }
    .base-info{
        margin-bottom:12px
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;

        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
    }

    .question-info{
       margin-bottom:12px
       background-color: #fff;
       border-radius: 8px;
       box-shadow: 0px 0px 4px 0px #ccc;
       font-weight: 600;

         :deep(.ant-form-item){
          margin-bottom: 8px;
         }
    }

    .content-info{
        margin-bottom:12px
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        padding:20px 6px;

        :deep(.ant-form-item){
          margin-bottom: 8px;
        }
    }

    .operation-wrapper{
        position: absolute;
        background-color: #fff;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        box-shadow: 1px 1px 5px #ccc;
        z-index: 99;
        :deep(.ant-btn-primary){
          margin-right: 12px;
        }
      }


      .list-margin{
        margin-right:20px
      }
      .list-margin-bottom{
        margin-bottom:15px
      }
      .firstTitle{
        font-size:17px;
        font-weight:600;
      }

  }
</style>
